<!DOCTYPE HTML>
<html>
<head>
<title>Single</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rambla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
<!-- //end-smoth-scrolling -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link href="css/style1.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<!--banner strat here-->
<div class="banner1">
	<div class="container">
		<div class="banner-main">
			<div class="banner-text">
				<a href="index.html"><div class="logo">
					<h1>PETS HOUSE</h1>
					<p>Lorem ipsum dolor sit amet adipiscing elit.</p>
				</div></a>			 
			</div>
		</div>
	</div>
</div>
<!--baner end here-->
<!--header start here-->
<div class="header-bottom">
  <div class="fixed-header">	
	<div class="container">
		<div class="header-main">
			<div class="header-left">
				<h2><a href="index.html">Pets House</a></h2>
			</div>
			<div class="header-right">					
				  <div class="top-nav">
					<span class="menu"><img src="images/menu.png" alt=""></span>
					<ul class="nav1">
						<li><a href="index.html" class="active">Home</a></li>
						<li><a href="index.html">About</a></li>
						<li><a href="index.html">Services</a></li>
						<li><a href="index.html">Gallery</a></li>
						<li><a href="index.html">Contact</a></li>
					</ul>	
					<!-- script-for-menu -->
					 <script>
					   $( "span.menu" ).click(function() {
						 $( "ul.nav1" ).slideToggle( 300, function() {
						 // Animation complete.
						  });
						 });
					</script>
					<!-- /script-for-menu -->
					<!-- script-for sticky-nav -->
		<script>
		$(document).ready(function() {
			 var navoffeset=$(".header-bottom").offset().top;
			 $(window).scroll(function(){
				var scrollpos=$(window).scrollTop(); 
				if(scrollpos >=navoffeset){
					$(".header-bottom").addClass("fixed");
				}else{
					$(".header-bottom").removeClass("fixed");
				}
			 });
			 
		});
		</script>
		<!-- /script-for sticky-nav -->
				</div>
			 </div>
			</div>
		  <div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--header end here-->
<div class="single">
	<div class="container">
		<div class="blog-main">
			<div class="blog-bottom">
			<div class="col-md-9 blog-left">
				<div class="blog-grids">
					<h4>Nam libero tempore soluta</h4>
					<a href="#"><img src="images/b2.jpg" alt="" class="img-responsive"></a>
					<div class="blog-detail">
						<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
						<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble</p>
						<p>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</p>
						<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
					</div>
				</div>
				<div class="single-commemts">
			   			<div class="col-md-2 user">
							<a href="#"><img src="images/user.png" alt=""/></a>
						</div>
						<div class="col-md-10 user-comment">
							<h4><a href="#">Bill Brown</a></h4>
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
						    <h5>On December 14, 2014 18:05</h5>
						    <div class="user-bwn">
						    	<a href="#"> Reply</a>
						    </div>
						</div>
                  <div class="clearfix"> </div>
			   </div>
              <div class="magsingle-contact">
			   	<h4>Leave A Comment</h4>
			   	<form>
			    	<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}"/>
			    	<input type="text"  class="no-mar" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/>
			    	<textarea onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
			    	<input type="submit"  value="Submit Comment" />
			    </form>
			   </div>

			</div>
			<div class="col-md-3 blog-right">
				<div class="blog-cate">
				<h4>Categories</h4>
				<ul>
					<li><a href="#">Featured</a></li>
					<li><a href="#">General</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">literature</a></li>
					<li><a href="#">Videos</a></li>
				</ul>
			</div>
			<div class="blog-cate">
				<h4>Archives</h4>
				<ul>
					<li><a href="#">January 2015</a></li>
					<li><a href="#">september 2014</a></li>
					<li><a href="#">october 2014</a></li>
					<li><a href="#">August 2014</a></li>
					<li><a href="#">July 2014</a></li>
				</ul>
		  </div>
		  <div class="blog-posts">
		  	<h4>Recent Posts</h4>
		  	<div class="blog-posts-grid">
		  		<div class="col-md-5 blog-post-left">
		  			<a href="single.html"><img src="images/b1.jpg" alt="" class="img-responsive"></a>
		  		</div>
		  		<div class="col-md-7 blog-post-right">
		  			<h5><a href="#">libero tempore</a></h5>
		  			<p>At vero eos et accusamus et iusto</p>
		  		</div>
		  	  <div class="clearfix"> </div>
		  	</div>
		  	<div class="blog-posts-grid">
		  		<div class="col-md-5 blog-post-left">
		  			<a href="single.html"><img src="images/b3.jpg" alt="" class="img-responsive"></a>
		  		</div>
		  		<div class="col-md-7 blog-post-right">
		  			<h5><a href="#">libero tempore</a></h5>
		  			<p>At vero eos et accusamus et iusto</p>
		  		</div>
		  	  <div class="clearfix"> </div>
		  	</div>
		  </div>
		</div>
		    <div class="clearfix"> </div>
		 </div>
	 </div>
  </div>
</div>

<!--footer strat here-->
<div class="footer">
		<div class="container">
			<div class="footer-main">
				<div class="col-md-3 footer-left">
					<h4>Useful Links</h4>
					<ul>
						<li><a href="#"><span class="pt-foot"> </span>Mirum est notare quam</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Nunc malesuada rhoncus</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Suspendisse purus orci</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Proin malesuada orci puru</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Quisque ullamcorper ut</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h4>Information</h4>
					<ul>
						<li><a class="scroll" href="index.html"><span class="pt-foot"> </span>Home</a></li>
						<li><a class="scroll" href="#about"><span class="pt-foot"> </span>About</a></li>
						<li><a class="scroll" href="#services"><span class="pt-foot"> </span>Services</a></li>
						<li><a class="scroll" href="#gallery"><span class="pt-foot"> </span>Gallery</a></li>
						<li><a class="scroll" href="#contact"><span class="pt-foot"> </span>Contact</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h4>New Solutions</h4>
					<ul>
						<li><a href="#"><span class="pt-foot"> </span>Notare quam littera</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Malesuada rhoncus congue</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Suspendisse finibus purus</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Malesuada orci purus</a></li>
						<li><a href="#"><span class="pt-foot"> </span>Quisque ullamcorper tellus</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h4>Flickr Posts</h4>
					<div class="flickr">
						<div class="f-one">
							<div class="f-left">
								<a href="single.html"><img src="images/f3.jpg" alt="" /></a>
							</div>
							<div class="f-left">
								<a href="single.html"><img src="images/f4.jpg" alt="" /></a>
							</div>
							<div class="f-left">
								<a href="single.html"><img src="images/f5.jpg" alt="" /></a>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="f-one">
							<div class="f-left">
								<a href="single.html"><img src="images/f2.jpg" alt="" /></a>
							</div>
							<div class="f-left">
								<a href="single.html"><img src="images/f1.jpg" alt="" /></a>
							</div>
							<div class="f-left">
								<a href="single.html"><img src="images/f6.jpg" alt="" /></a>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="footer-text">			
				<div class="ft-right">
					<p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<script type="text/javascript">
										$(document).ready(function() {
											/*
											var defaults = {
									  			containerID: 'toTop', // fading element id
												containerHoverID: 'toTopHover', // fading element hover id
												scrollSpeed: 1200,
												easingType: 'linear' 
									 		};
											*/
											
											$().UItoTop({ easingType: 'easeOutQuart' });
											
										});
									</script>
						<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>

</div>
</body>
</html>

		